<template>
  <div class="about">
    <!-- 下拉 -->
    <select v-model="selectValue">
        <option value="" v-for="item,index in options" :value="item.value" :label="item.label"></option>
    </select>
    <!-- 关键字搜索 -->
    <input type="text" placeholder="请输入关键字搜索" v-model="searchVal">
    <!-- 任务列表 -->
    <table>
        <thead>
            <th>任务列表</th>
            <th>状态</th>
            <th>操作</th>
        </thead>
          <tr v-for="item,index in result" :key="item.id">
             <td>{{item.title}}</td>
             <td>{{item.status | filStatus}}</td>
             <td>
                 <span @click="del(item.id)">删除</span>
                 <span @click="edit(index,item)">编辑</span>
             </td>
          </tr>
    </table>
    <!-- 弹出框 -->
    <van-popup v-model="show">
        <div class="con-form">
            <input type="text" v-model="editValue">
            <van-button type="primary" @click="update">编辑数据</van-button>
        </div>
    </van-popup>
  </div>
</template>
<script>
import {mapMutations} from 'vuex'
export default {
    data() {
        return {
            options:[{
                label:"已完成",
                value:1
            },{
                label:"未完成",
                value:0
            },{
                label:"全部",
                value:-1
            }],
            selectValue:-1,//select下拉框的值
            searchVal:'',//搜索的关键字
            show:false,//弹出框的状态
            editValue:'',//弹出框输入框的内容
            eidtIndex:''
        }
    },
    computed:{
        list(){
            if(this.selectValue !=-1){
                // 做筛选
               return this.$store.state.list.filter(item=>item.status == this.selectValue)
            }else{
                // 返回所有的任务 只要selectValue =-1 就是所有的任务
              return this.$store.state.list
            }
        },
        // 关键字搜索
        result(){
           if(this.searchVal !=''){
            //   搜索
            return this.list.filter(item=>item.title.includes(this.searchVal))
           }else{
            // 所有的任务
              return this.list
           }
        }

    },
    methods: {
        // 点击编辑 弹窗 回显数据
        edit(index,item){
            this.show = true
            this.editValue = item.title
            this.eidtIndex = index



        },
        // 提交编辑数据
        update(){
             this.updateList({editValue:this.editValue,index:this.eidtIndex})
             this.show = false
        },
        ...mapMutations(['updateList','del'])
    },
    filters:{
        filStatus(val){
            // 在js中0默认是false  1默认是true
            if(val == 0) return '未完成'
            if(val == 1) return '已完成'
            if(val == 2) return '取消'

        }
    }
}
</script>
<style lang="scss" scoped>
.con-form{
  padding: 30px 20px;
}
</style>

